{% extends "../../bocore/admin/master.html" %}
{% block sidebar_header %}{% end %}
{% block content_header_title%}
{{current_screen.current_menu["menu_title"]}}
{% end %}
{% block header%}
<link href="{{static_url('theme/plugins/select2/select2.min.css')}}" rel="stylesheet">
<link href="{{static_url('theme/plugins/iCheck/all.css')}}" rel="stylesheet">
{% end %}
{% block footer%}
<script src="{{static_url('theme/plugins/select2/select2.full.min.js')}}"></script>
<script src="{{static_url('theme/plugins/iCheck/icheck.min.js')}}"></script>
<script src="{{static_url('js/common-tools.js')}}"></script>
<script type="text/javascript">
 function bo_code_generation(elem, tpl_file){
    $("#template_file").val(tpl_file);
    var d = $("#table_meta_form").serialize();
        $.post("{{reverse_url('api', 'code_generation')}}", d, function(rsp){
            $("#code").val(rsp.data);
        }, "json");
 }
 $(function(){
  $(".select2").select2();
 });

</script>
{% end %}
{% block sidebar_header %}
{% end %}
{% block content_body%}
<form id="table_meta_form" method="post">
    {% module xsrf_form_html() %}
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">数据库 <span id="dsn_info"
                                            style="font-size:12px;color:#666666;font-style: oblique;"></span></h3>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
                        title="Collapse">
                    <i class="fa fa-minus"></i></button>
            </div>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <span>连接名称</span>
                        <select class="select2 form-control" id="db_cnn_names">
                        </select>
                        <a href="#" class="pull-right" style="margin-left:5px;margin-top:5px;" id="remove_dsn_btn"><i
                                class="fa fa-minus-circle text-green"></i></a>
                        <a href="#" class="pull-right" style="margin-top:5px;" data-toggle="modal"
                           data-target="#myModal"><i
                                class="fa fa-plus-circle text-red"></i></a>
                    </div>

                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <span>数据表</span>
                        <select class="select2 form-control" id="db_tables">
                        </select>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="padding-bottom:15px;">
            {%
            set btns = apply_filters("bo_code_generation_buttons", list(), current_screen)
            %}
            {% if btns %}
            <div class="btn-group pull-right">
                {% for btn in btns %}
                <button type="button" class="btn btn-block btn-primary btn-sm"
                        onclick="bo_code_generation(this, '{{btn[1]}}');">{{btn[0]}}
                </button>
                {% end %}
            </div>
            {% end %}
        </div>
    </div>
    <!-- /.box -->
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <i class="fa fa-code"></i>
                        <h3 class="box-title">代码</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <label for="code"></label><textarea class="form-control" rows="25" id="code"></textarea>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs pull-right">
                    <li class="active"><a href="#tab_2-2" data-toggle="tab" aria-expanded="true">列过滤</a></li>
                    <li class=""><a href="#tab_1-1" data-toggle="tab" aria-expanded="false">属性</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="tab_1-1" style="height:500px;overflow-y:auto;">
                        {%
                        raw apply_filters("bo_code_generation_properties_form", "", current_screen)
                        %}
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane active" id="tab_2-2">
                        <div class="box-group" id="accordion">
                            <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                            <div class="panel box box-primary">
                                <div class="box-header with-border">
                                    <h4 class="box-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                            排除列
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in">
                                    <div class="box-body list-group no-padding nav nav-stacked"
                                         id="exclude_columns_panel" style="height:200px;overflow-y:auto;">
                                    </div>
                                </div>
                            </div>
                            <div class="panel box box-primary">
                                <div class="box-header with-border">
                                    <h4 class="box-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                                           class="collapsed"
                                           aria-expanded="false">
                                            排序列
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false">
                                    <div class="box-body list-group no-padding nav nav-stacked" id="order_columns_panel"
                                         style="height:200px;overflow-y:auto;">
                                    </div>
                                </div>
                            </div>
                            <div class="panel box box-primary">
                                <div class="box-header with-border">
                                    <h4 class="box-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree2"
                                           class="collapsed" aria-expanded="false">
                                            搜索列
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseThree2" class="panel-collapse collapse" aria-expanded="false">
                                    <div class="box-body list-group no-padding nav nav-stacked"
                                         id="search_columns_panel" style="height:200px;overflow-y:auto;">
                                    </div>
                                </div>
                            </div>
                            <div class="panel box box-primary">
                                <div class="box-header with-border">
                                    <h4 class="box-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#freeze_columns_three"
                                           class="collapsed" aria-expanded="false">
                                            冻结列
                                        </a>
                                    </h4>
                                </div>
                                <div id="freeze_columns_three" class="panel-collapse collapse" aria-expanded="false">
                                    <div class="box-body list-group no-padding nav nav-stacked"
                                         id="freeze_columns_panel" style="height:200px;overflow-y:auto;">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div>
        </div>
    </div>
    <input type="hidden" id="current_table_name" name="current_table_name"/>
    <input type="hidden" name="action" value="bo_code_generation"/>
    <input type="hidden" id="template_file" name="template_file" value=""/>
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增数据库连接</h4>
            </div>
            <div class="modal-body">
                <form id="db_conn_form">
                    {% module xsrf_form_html() %}
                    <div class="form-group">
                        <label for="db_conn_name">连接名称</label>
                        <input type="text" class="form-control" id="db_conn_name" name="db_conn_name"
                               placeholder="连接名称">
                    </div>
                    <div class="form-group">
                        <label for="db_type">数据库类型</label>
                        <select id="db_type" class="select2 form-control" name="db_type">
                            <option value="pymysql">MySQL</option>
                            <option value="pymssql">MSSQL</option>
                            <option value="cx_oracle">Oracle</option>
                            <option value="psycopg2">Postgres</option>
                            <option value="sqlite">SQLite</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="db_host">主机</label>
                        <input type="text" class="form-control no-file-db" name="db_host" id="db_host" placeholder="主机"
                               value="127.0.0.1">
                    </div>
                    <div class="form-group">
                        <label for="db_port">端口</label>
                        <input type="number" class="form-control no-file-db" name="db_port" id="db_port"
                               placeholder="端口">
                    </div>
                    <div class="form-group">
                        <label for="db_user">用户名</label>
                        <input type="text" class="form-control no-file-db" name="db_user" id="db_user"
                               placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="db_pwd">密码</label>
                        <input type="text" class="form-control no-file-db" name="db_pwd" id="db_pwd" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="db_name">数据库名</label>
                        <input type="text" class="form-control" id="db_name" name="db_name" placeholder="数据库名">
                        <p class="help-block">SQLite 填写数据库文件路径</p>
                    </div>
                    <input name="action" id="action" value="dsn_save" type="hidden"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save_db_conn_info_btn">保存</button>
            </div>
        </div>
    </div>
</div>
{% end %}